<template>
	<view class="bottom">
		<view class="bottom-header">
			<view class="bottom-header-left">排名/用户</view>
			<view class="bottom-header-right">获得宝石奖励</view>
		</view>
		<view class="bottom-content">
			<view class="bottom-content-first" v-for="item in 10" :key="item.id">
				<view class="bottom-content-left">
					<view class="ranking-left">1</view>
					<image src="../../static/blood/Group122@2x.png" mode=""></image>
					<view class="ranking-right">修*哥</view>
				</view>
				<view class="bottom-content-right">
					<view class="number-left">1614751</view>
					<image src="../../static/blood/ic_ape_stone10@2x.png" mode=""></image>
				</view>
			</view>
				
		</view>
	</view>
		
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
 .bottom{
				background:url('../../static/blood/Rectangle61@2x.png');
				background-size:cover;
				min-height: 100vh;
				border-radius:38.17rpx 38.17rpx 0rpx 0rpx;
				background:#FEFDF9FF;
				z-index:1;
				margin-left: 30rpx;
				margin-right: 30rpx;
				.bottom-header{
					width: 100%;
					height: 101rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-radius:38.17rpx 38.17rpx 0rpx 0rpx;
					background:linear-gradient(to right, #FFFDFEFF, #FEF1E0FF);
					border-bottom: 1rpx solid rgba(107,107,107,0.3);
					.bottom-header-left,.bottom-header-right{
						font-size: 23rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: rgba(0,0,0,0.5);
					}
					.bottom-header-left{
							padding-left:29rpx;
					}
					.bottom-header-right{
						padding-right: 29rpx;
					}
				}
			  .bottom-content{
					display: flex;
					flex-direction: column;
					.bottom-content-first{
						height: 101rpx;
						display: flex;
						align-items: center;
						margin-left:40rpx;
						margin-right:40rpx;
						justify-content: space-between;
						border-bottom: 1rpx solid rgba(107,107,107,0.3);
						.bottom-content-left{
							display: flex;
							align-items: center;
							.ranking-left{
								font-size: 27rpx;
								font-family: Douyin Sans, Douyin Sans;
								font-weight: bold;
								color: #F74F31;
								padding-right: 15rpx;
							}
							image{
								width: 55rpx;
								height: 55rpx;
								padding-right: 15rpx;
							}
							.ranking-right{
								font-size: 23rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								color: rgba(0,0,0,0.5);
							}
						}
					  .bottom-content-right{
							display: flex;
							align-items: center;
							.number-left{
								font-size: 27rpx;
								font-family: Douyin Sans, Douyin Sans;
								font-weight: bold;
								color: #000000;
							}
							image{
								width: 36rpx;
								height: 38rpx;
								padding-left: 9.54rpx;
								
							}
						}
					}
				}
			}
		
</style>
